<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item prop="carrierId">
        <el-select v-model="queryParams.carrierId" placeholder="承运商" clearable size="small">
          <el-option v-for="item in carrierOptions" :key="item.id" :label="item.carrierName" :value="item.id" />
        </el-select>
      </el-form-item>


      <el-form-item prop="scheduleId">
        <el-select v-model="queryParams.scheduleId" placeholder="车次" clearable size="small">
          <el-option v-for="item in scheduleOptions" :key="item.id" :label="item.scheduleDayName" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item prop="carNumber">
        <el-select v-model="queryParams.carNumber" placeholder="车牌号" clearable size="small">
          <el-option v-for="item in carOptions" :key="item.id" :label="item.carNumber" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item prop="driverId">
        <el-select v-model="queryParams.driverId" placeholder="驾驶员" clearable size="small">
          <el-option v-for="item in driverOptions" :key="item.id" :label="item.personName" :value="item.id" />
        </el-select>
      </el-form-item>

    <el-form-item>
        <el-date-picker v-model="daterangeCreateTime" size="small" style="width: 240px" value-format="yyyy-MM-dd"
          type="daterange" range-separator="-" start-placeholder="下发起始日期" end-placeholder="截止日期"></el-date-picker>
        </el-date-picker>
    </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['tms:waybill:add']">新增</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['tms:waybill:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['tms:waybill:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['tms:waybill:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-tickets" size="mini" @click="handleReceive"
          v-hasPermi="['tms:waybill:receive']" v-if="queryParams.status == '0'">接单</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-box" size="mini" @click="handleEntruck"
          v-hasPermi="['tms:waybill:entruck']" v-if="queryParams.status == '1'">装车</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-truck" size="mini" @click="handleDepart"
          v-hasPermi="['tms:waybill:depart']" v-if="queryParams.status == '2'">发车</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-row>
      <el-col>
        <div style="margin-bottom: 15px;display: flex;">
          <el-radio-group v-model="queryParams.status" @change="radioChange">
            <el-radio-button :label="undefined" >全部</el-radio-button>
            <!-- <el-radio-button label="0">待接单</el-radio-button> -->
            <!-- <el-radio-button label="1">待装车</el-radio-button> -->
            <el-radio-button label="2">待发车</el-radio-button>
            <el-radio-button label="3">运输中</el-radio-button>
            <!-- <el-radio-button label="4">待派件</el-radio-button> -->
            <el-radio-button label="5">待签收</el-radio-button>
            <el-radio-button label="6">已签收</el-radio-button>
            <!-- <el-radio-button label="-1">已作废</el-radio-button> -->
          </el-radio-group>
        </div>
        <el-table v-loading="loading" :data="waybillList" @selection-change="handleSelectionChange" border stripe>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="运单号" align="center" prop="waybillNo" width="160" fixed="left">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleDetail(scope.row)">{{scope.row.waybillNo}}</el-link>
        </template>
      </el-table-column>
          <el-table-column label="车牌号" align="center" prop="carNumber" width="120" fixed="left" />
          <el-table-column label="驾驶员" align="center" prop="driverName" fixed="left" />
          <el-table-column label="寄件人" prop="sendContacts" width="180"/>
          <el-table-column label="寄件地址" prop="sendAddr" min-width="280" />
          <el-table-column label="收件人" prop="takeContacts" width="180"/>
          <el-table-column label="收件地址" prop="takeAddr" min-width="280"/>

          <el-table-column label="下发时间" align="center" prop="createTime" width="200">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="派单时间" align="center" prop="dispatchTime" width="200">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.dispatchTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="接单时间" align="center" prop="takeBillTime" width="200">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.takeBillTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="取件时间" align="center" prop="takeTime" width="200">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.takeTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发车时间" align="center" prop="sendTime" width="200">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.sendTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="派送时间" align="center" prop="deliverTime" width="200">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.deliverTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="送达时间" align="center" prop="arriveTime" width="200">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.arriveTime) }}</span>
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="作废时间" align="center" prop="cancelTime" width="200">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.cancelTime) }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="状态 " align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.tms_waybill_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <!-- <el-table-column label="备注" align="center" prop="memo" /> -->
          <!-- <el-table-column label="回单号" align="center" prop="receiptNo" />
          <el-table-column label="回单附件" align="center" prop="receiptPics" />
          <el-table-column label="回单状态" align="center" prop="receiptStatus">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.tms_receipt_status" :value="scope.row.receiptStatus" />
            </template>
          </el-table-column> -->
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" min-width="160">
            <template slot-scope="scope">
             <!-- <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)"
                v-hasPermi="['tms:waybill:query']">查看</el-button> -->
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                v-hasPermi="['tms:waybill:edit']">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                v-hasPermi="['tms:waybill:remove']">删除</el-button>
            </template>
          </el-table-column>
          <!-- <el-table-column label="订单ID" align="center" prop="orderId" />
          <el-table-column label="承运商" align="center" prop="carrierName" />
          <el-table-column label="车次" align="center" prop="scheduleName" />-->
          <!-- <el-table-column label="车辆ID" align="center" prop="carId" /> -->
          <!-- <el-table-column label="驾驶员ID" align="center" prop="driverId" /> -->
          <!-- <el-table-column label="调度员ID" align="center" prop="dispatcherId" /> -->
          <!-- <el-table-column label="调度员" align="center" prop="dispatcher" />
          <el-table-column label="签收人" align="center" prop="signer" />
          <el-table-column label="签收单位" align="center" prop="signDeptId" />
          <el-table-column label="签收信息" align="center" prop="signInfo" /> -->
          <!-- <el-table-column label="创建人" align="center" prop="createBy" />
          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更新人" align="center" prop="updateBy" />
          <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="删除标识" align="center" prop="delFlag">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_del_flag" :value="scope.row.delFlag" />
            </template>
          </el-table-column> -->
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>




    <!-- 添加或修改运单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="880px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">

        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="订单ID" prop="orderId">
              <el-input v-model="form.orderId" placeholder="请输入订单ID" />
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="承运商ID" prop="carrierId">
              <el-input v-model="form.carrierId" placeholder="请输入承运商ID" />
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="车次ID" prop="scheduleId">
              <el-input v-model="form.scheduleId" placeholder="请输入车次ID" />
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="车辆ID" prop="carId">
              <el-input v-model="form.carId" placeholder="请输入车辆ID" />
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="车牌号" prop="carNumber">
              <el-input v-model="form.carNumber" placeholder="请输入车牌号" />
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="驾驶员ID" prop="driverId">
              <el-input v-model="form.driverId" placeholder="请输入驾驶员ID" />
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="驾驶员" prop="driverName">
              <el-input v-model="form.driverName" placeholder="请输入驾驶员" />
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="派单时间" prop="dispatchTime">
              <el-date-picker clearable size="small" v-model="form.dispatchTime" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择派单时间">
              </el-date-picker>
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="接单时间" prop="takeBillTime">
              <el-date-picker clearable size="small" v-model="form.takeBillTime" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择接单时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="取件时间" prop="takeTime">
              <el-date-picker clearable size="small" v-model="form.takeTime" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择取件时间">
              </el-date-picker>
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="发车时间" prop="sendTime">
              <el-date-picker clearable size="small" v-model="form.sendTime" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择发车时间">
              </el-date-picker>
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="派送时间" prop="deliverTime">
              <el-date-picker clearable size="small" v-model="form.deliverTime" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择派送时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="送达时间" prop="arriveTime">
              <el-date-picker clearable size="small" v-model="form.arriveTime" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择送达时间">
              </el-date-picker>
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="作废时间" prop="cancelTime">
              <el-date-picker clearable size="small" v-model="form.cancelTime" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择作废时间">
              </el-date-picker>
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="状态 ">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in dict.type.tms_waybill_status" :key="dict.value" :label="dict.value">
                  {{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="备注" prop="memo">
              <el-input v-model="form.memo" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="回单号" prop="receiptNo">
              <el-input v-model="form.receiptNo" placeholder="请输入回单号" />
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="回单附件" prop="receiptPics">
              <el-input v-model="form.receiptPics" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="回单状态">
              <el-radio-group v-model="form.receiptStatus">
                <el-radio v-for="dict in dict.type.tms_receipt_status" :key="dict.value" :label="dict.value">
                  {{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="调度员ID" prop="dispatcherId">
              <el-input v-model="form.dispatcherId" placeholder="请输入调度员ID" />
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="调度员" prop="dispatcher">
              <el-input v-model="form.dispatcher" placeholder="请输入调度员" />
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="签收人" prop="signer">
              <el-input v-model="form.signer" placeholder="请输入签收人" />
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="签收单位" prop="signDeptId">
              <el-input v-model="form.signDeptId" placeholder="请输入签收单位" />
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="签收信息" prop="signInfo">
              <el-input v-model="form.signInfo" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listWaybill,
    getWaybill,
    delWaybill,
    addWaybill,
    updateWaybill,
    receiveWaybill,
    entruckWaybill,
    departWaybill
  } from "@/api/tms/waybill";
  import {listCarrier} from '@/api/tms/carrier';
  import {listSchedule} from '@/api/tms/schedule';
  import {listCar} from '@/api/tms/car';
  import {listDriver} from '@/api/tms/driver';
  import {listUser} from '@/api/system/user'

  export default {
    name: "Waybill",
    dicts: ['tms_waybill_status', 'sys_del_flag', 'tms_receipt_status'],
    data() {
      return {
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 运单表格数据
        waybillList: [],
        carrierOptions: [],
        scheduleOptions: [],
        carOptions: [],
        driverOptions: [],
        dispatcherOptions: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 签收信息时间范围
        daterangeDispatchTime: [],
        // 签收信息时间范围
        daterangeTakeBillTime: [],
        // 签收信息时间范围
        daterangeTakeTime: [],
        // 签收信息时间范围
        daterangeSendTime: [],
        // 签收信息时间范围
        daterangeDeliverTime: [],
        // 签收信息时间范围
        daterangeArriveTime: [],
        daterangeCreateTime:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderId: undefined,
          carrierId: undefined,
          scheduleId: undefined,
          carId: undefined,
          carNumber: undefined,
          driverId: undefined,
          driverName: undefined,
          dispatchTime: undefined,
          takeBillTime: undefined,
          takeTime: undefined,
          sendTime: undefined,
          deliverTime: undefined,
          arriveTime: undefined,
          status: undefined,
          receiptStatus: undefined,
          dispatcherId: undefined,
          dispatcher: undefined,
          signer: undefined,
          signDeptId: undefined,
          delFlag: '0'
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          orderId: [{
            required: true,
            message: "订单ID不能为空",
            trigger: "blur"
          }],
          carrierId: [{
            required: true,
            message: "承运商ID不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    created() {
      this.getList();
      this.getCarrier();
      this.getCar();
      this.getSchedule();
      this.getDriver();
      this.getUser();
    },
    methods: {
      /** 查询运单列表 */
      getList() {
        this.loading = true;
        this.queryParams.params = {};
        if (null != this.daterangeDispatchTime && '' != this.daterangeDispatchTime) {
          this.queryParams.params["beginDispatchTime"] = this.daterangeDispatchTime[0];
          this.queryParams.params["endDispatchTime"] = this.daterangeDispatchTime[1];
        }
        if (null != this.daterangeTakeBillTime && '' != this.daterangeTakeBillTime) {
          this.queryParams.params["beginTakeBillTime"] = this.daterangeTakeBillTime[0];
          this.queryParams.params["endTakeBillTime"] = this.daterangeTakeBillTime[1];
        }
        if (null != this.daterangeTakeTime && '' != this.daterangeTakeTime) {
          this.queryParams.params["beginTakeTime"] = this.daterangeTakeTime[0];
          this.queryParams.params["endTakeTime"] = this.daterangeTakeTime[1];
        }
        if (null != this.daterangeSendTime && '' != this.daterangeSendTime) {
          this.queryParams.params["beginSendTime"] = this.daterangeSendTime[0];
          this.queryParams.params["endSendTime"] = this.daterangeSendTime[1];
        }
        if (null != this.daterangeDeliverTime && '' != this.daterangeDeliverTime) {
          this.queryParams.params["beginDeliverTime"] = this.daterangeDeliverTime[0];
          this.queryParams.params["endDeliverTime"] = this.daterangeDeliverTime[1];
        }
        if (null != this.daterangeArriveTime && '' != this.daterangeArriveTime) {
          this.queryParams.params["beginArriveTime"] = this.daterangeArriveTime[0];
          this.queryParams.params["endArriveTime"] = this.daterangeArriveTime[1];
        }
        if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
          this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
          this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
        }
        listWaybill(this.queryParams).then(response => {
          this.waybillList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      getCarrier(){
        listCarrier().then(response=>{
          this.carrierOptions = response.rows;
        })
      },
      getSchedule(){
        listSchedule().then(response=>{
          this.scheduleOptions = response.rows;
        })
      },
      getCar(){
        listCar().then(response=>{
          this.carOptions = response.rows;
        })
      },
      getDriver(){
        listDriver().then(response=>{
          this.driverOptions = response.rows;
        })
      },
      getUser(){
        listUser().then(response=>{
          this.dispatcherOptions = response.rows;
        })
      },
      radioChange(){

        this.getList();
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          orderId: undefined,
          carrierId: undefined,
          scheduleId: undefined,
          carId: undefined,
          carNumber: undefined,
          driverId: undefined,
          driverName: undefined,
          dispatchTime: undefined,
          takeBillTime: undefined,
          takeTime: undefined,
          sendTime: undefined,
          deliverTime: undefined,
          arriveTime: undefined,
          cancelTime: undefined,
          status: "0",
          memo: undefined,
          receiptNo: undefined,
          receiptPics: undefined,
          receiptStatus: "0",
          dispatcherId: undefined,
          dispatcher: undefined,
          signer: undefined,
          signDeptId: undefined,
          signInfo: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
          delFlag: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.daterangeDispatchTime = [];
        this.daterangeTakeBillTime = [];
        this.daterangeTakeTime = [];
        this.daterangeSendTime = [];
        this.daterangeDeliverTime = [];
        this.daterangeArriveTime = [];
        this.daterangeCreateTime = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        // this.reset();
        // this.open = true;
        // this.title = "添加运单";
        this.$router.push({
          path: '/tms/waybillInfo/add',
          query: {
            pageNum: this.queryParams.pageNum
          }
        });
      },
      /** 查看按钮操作 */
      handleDetail(row){
        const id = row.id;
        this.$router.push({
          path: '/tms/waybillInfo/detail/' + id,
          query: {
            pageNum: this.queryParams.pageNum
          }
        });
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        // this.loading = true;
        // this.reset();
        // const id = row.id || this.ids
        // getWaybill(id).then(response => {
        //   this.loading = false;
        //   this.form = response.data;
        //   this.open = true;
        //   this.title = "修改运单";
        // });
        const id = row.id;
        this.$router.push({
          path: '/tms/waybillInfo/edit/' + id,
          query: {
            pageNum: this.queryParams.pageNum
          }
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              updateWaybill(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addWaybill(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除运单编号为"' + ids + '"的数据项？').then(() => {
          this.loading = true;
          return delWaybill(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).finally(() => {
          this.loading = false;
        });
      },
      /** 接单按钮操作 */
      handleReceive(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认接单？').then(() => {
          this.loading = true;
          return receiveWaybill(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("接单成功");
        }).finally(() => {
          this.loading = false;
        });
      },
      /** 装车按钮操作 */
      handleEntruck(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认装车？').then(() => {
          this.loading = true;
          return entruckWaybill(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("装车成功");
        }).finally(() => {
          this.loading = false;
        });
      },
      /** 发车按钮操作 */
      handleDepart(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认发车？').then(() => {
          this.loading = true;
          return departWaybill(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("发车成功");
        }).finally(() => {
          this.loading = false;
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('tms/waybill/export', {
          ...this.queryParams
        }, `waybill_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
